<template>
  <div>
    <div class="header">
      <van-search
        shape="round"
        v-model.trim="value"
        placeholder="请输入搜索关键词"
        @update:model-value="iptV"
      />
      <span class="txt" @click="toBack">取消</span>
    </div>

    <!-- 初始,历史记录,热门 -->
    <div class="init" v-if="flag == 'init'">
      <!-- 历史记录 -->
      <div class="history" v-if="startData.historyData">
        <div class="history-txt"  v-if="startData.historyData.length">
          <span>历史记录</span>
          <van-icon @click="del" name="delete-o" />
        </div>
        <ul class="historyData">
          <li
            class="historyData-item"
            v-for="item in startData.historyData"
            :key="item.id"
            @click="toGood(item.keyword)"
          >
            {{ item.keyword }}
          </li>
          <li class="clear"></li>
        </ul>
      </div>
      <!-- 热门 -->
      <div class="hot">
        <span class="hot-txt">热门搜索</span>
        <ul class="hotKeywordList">
          <li
            class="hotKeywordList-item"
            v-for="item in startData.hotKeywordList"
            :key="item.id"
            @click="toGood(item.keyword)"
          >
            {{ item.keyword }}
          </li>
          <li class="clear"></li>
          <li class="clear"></li>
        </ul>
      </div>
    </div>

    <!-- 提示 -->
    <div class="notice" v-else-if="flag == 'notice'">
      提示
      <ul class="noticeList">
        <li
          v-for="item in key.keywords"
          class="notice-item"
          :key="item.id"
          @click="toGood(item.name)"
        >
          <span class="txt-l">{{ item.name }}</span>
          <van-icon class="txt-r" name="arrow" />
        </li>
      </ul>
    </div>

    <!-- 商品展示 -->
    <div class="footer-goods" v-else-if="flag == 'goodList'">
      <ul class="newGoodList">
        <li
          class="newGoodList-item"
          v-for="el in goods.keywords"
          :key="el.id"
          @click="toGoodsDetail(el.id)"
        >
          <img class="img" :src="el.list_pic_url" alt="" />
          <div class="goods-txt">
            <span class="txt-t">{{ el.name }}</span>
            <span class="txt-b">{{ el.retail_price }}</span>
          </div>
        </li>
        <li></li>
      </ul>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { start, keyWord, history, clearhistoryAction } from '@/api/home/search'
export default {
  name: 'searchApi',
  setup () {
    const startData = ref([])
    const flag = ref('init')
    const router = useRouter()
    const key = ref([])
    const goods = ref([])
    const value = ref('')
    function init () {
      start({
        openId: localStorage.getItem('openId')
      }).then((res) => {
        console.log('res', res)
        startData.value = res
      })
    }
    init()

    const toBack = () => {
      router.back()
    }
    const iptV = () => {
      if (!value.value) {
        flag.value = 'init'
        return
      }
      flag.value = 'notice'
      keyWord({
        keyword: value.value,
        order: 'desc'
      }).then((res) => {
        console.log(res)
        key.value = res
      })
    }
    const toGood = (val) => {
      flag.value = 'goodList'
      keyWord({
        keyword: val,
        order: 'desc'
      }).then((res) => {
        goods.value = res
      })
      history({
        keyword: val,
        openId: localStorage.getItem('openId')
      }).then((res) => {
        console.log(res)
      })
    }
    const toGoodsDetail = (id) => {
      router.push({ path: '/home/goodsDetail', query: { id: id } })
    }
    const del = () => {
      clearhistoryAction({
        openId: localStorage.getItem('openId')
      }).then((res) => {
        console.log(res)
        init()
      })
    }

    return {
      flag,
      key,
      value,
      goods,
      startData,
      toBack,
      iptV,
      toGood,
      toGoodsDetail,
      del
    }
  }
}

</script>

<style lang="scss" scoped>
@import './scss/index.scss'
</style>
